<template>
  <div class="detailContainer">
    <div
      style="
        height: 100%;
        padding-left: 150px;
        padding-right: 150px;
        overflow-y: auto;
        padding-bottom: 70px;
      "
    >
    <div style="padding: 20px">
      <el-card>
        <div style="display: flex; justify-content: space-between">
          <div class="infoContainer">
            <div class="title">
              <span class="name">{{ detailData.name }}</span>
              <span class="id">{{ detailData.stockInNo }}</span>
            </div>
            <div class="detailInfo">
              <div class="createInfo">
                <span style="font-size: 15px"
                  >创建人：<span style="font-size: 14px; color: #969696">{{
                    detailData.creator
                  }}</span></span
                >

                <span style="font-size: 15px; margin-left: 20px"
                  >创建时间：<span style="font-size: 14px; color: #969696" >{{
                    formattedCreatedAt
                  }}</span></span
                >
              </div>
              <div class="updateInfo">
                <span style="font-size: 15px"
                  >更新人：<span style="font-size: 14px; color: #969696">{{
                    detailData.creator
                  }}</span></span
                >
                <span style="font-size: 15px; margin-left: 20px"
                  >更新时间：<span style="font-size: 14px; color: #969696">{{
                  updatedAt
                  }}</span></span
                >
              </div>
            </div>
            <div class="buttonGroup" style="margin-top: 20px">
              <el-button type="primary" plain style="width: 80px" @click="handleEdit"
                >编辑</el-button
              >
              <el-button type="primary" plain style="width: 80px" @click="handleDelete"
                >删除</el-button
              >
              <el-button type="primary" plain style="width: 80px" @click="handleStockIn"
                >{{ state ? '入库' : '出库' }}</el-button
              >
              <el-button type="primary" plain style="width: 80px"
                >打印</el-button
              >
            </div>
          </div>
          <div class="imgShow" v-if="state">
            <img 
                src="/public/entranceImgs/entrance.png"
                alt=""
                style="width: 80px"
            />
          </div>
          <div class="imgShow" v-else>
            <img 
                src="/public/entranceImgs/noEntrance.png"
                alt=""
                style="width: 80px"
            />
          </div>
        </div>
      </el-card>
        <el-card style="margin-top: 20px">
          <template #header>
            <span style="font-size: 16px">入库详情</span>
          </template>
          <div class="basicBody">
            <div class="basicInfoContainer">
              <div class="milestone">
                <div class="milestone-content">基础信息</div>
              </div>
              <el-descriptions
                style="margin-top: 40px; width: 100%"
                column="2"
                label-width="120"
            >
              <el-descriptions-item label="入库单编号">{{
                  detailData.stockInNo
                }}</el-descriptions-item>
              <el-descriptions-item label="入库单名称">{{
                  detailData.name
                }}</el-descriptions-item>
              <el-descriptions-item label="入库日期">{{
                  detailData.stockInDate
                }}</el-descriptions-item>
              <el-descriptions-item label="采购单号">{{
                  detailData.purchaseOrderNo
                }}</el-descriptions-item>
              <el-descriptions-item label="采购单名称">{{
                  detailData.purchaseOrderName
                }}</el-descriptions-item>
              <el-descriptions-item label="供应商">{{
                  detailData.supplierName
                }}</el-descriptions-item>
              <el-descriptions-item label="来料检验名称">{{
                  detailData.inspectionName
                }}</el-descriptions-item>
              <el-descriptions-item label="来料检验单号">{{
                  detailData.inspectionNo
                }}</el-descriptions-item>
                <el-descriptions-item label="备注">{{
                  detailData.remark
                }}</el-descriptions-item>
              </el-descriptions>
            </div>
            <div class="warehouseContainer">
              <div class="milestone">
                <div class="milestone-content">入库明细</div>
              </div>
              <el-descriptions
                style="margin-top: 40px; width: 100%"
                column="2"
                label-width="120"
            >
              <el-descriptions-item label="物料名称">{{
                  detailData.materialName
                }}</el-descriptions-item>
              <el-descriptions-item label="物料编号">{{
                  detailData.materialNo
                }}</el-descriptions-item>
              <el-descriptions-item label="规格型号">{{
                  detailData.specification
                }}</el-descriptions-item>
                <el-descriptions-item label="单位">{{
                  detailData.unit
                }}</el-descriptions-item>
                <el-descriptions-item label="生产日期">{{
                  detailData.productionDate
                }}</el-descriptions-item>
              <el-descriptions-item label="到期日期">{{
                  detailData.expiryDate
                }}</el-descriptions-item>
              <el-descriptions-item label="批次号">{{
                  detailData.batchNo
                }}</el-descriptions-item>
              <el-descriptions-item label="入库数量">{{
                  detailData.stockInQuantity
                }}</el-descriptions-item>
                <el-descriptions-item label="仓库名称">{{
                  detailData.warehouseName
                }}</el-descriptions-item>
              <el-descriptions-item label="库区名称">{{
                  detailData.zoneName
                }}</el-descriptions-item>
                <el-descriptions-item label="库位名称">{{
                  detailData.locationName
                }}</el-descriptions-item>
                <el-descriptions-item label="仓库负责人">{{
                  detailData.warehouseManager
                }}</el-descriptions-item>
              </el-descriptions>
            </div>
          </div>
        </el-card>
      
    </div>

    <div class="footer" :class="{ 'footer-visible': isFooterVisible }">
      <div class="footerButton">
        <el-button type="primary" plain style="width: 80px" @click="close"
          >关闭</el-button
        >
      </div>
    </div>
  </div>
  </div>
 
</template>

<script setup lang="ts">
import { ref, onMounted,computed } from "vue";
import { useRouter, useRoute } from "vue-router";
import { ElMessage, ElMessageBox } from 'element-plus'
import { 
  getStockInDetailApi,
  putStockInDeleteApi
} from '@/api/Buy'
import dayjs from 'dayjs';
// import type { StockInItem } from '@/types/Buy'
const isFooterVisible = ref(false);
const $router = useRouter()
const $route = useRoute()
const id = $route.params.id as string
//定义出入库状态state
const formattedCreatedAt = computed(() => {
  return dayjs(detailData.value.createdAt).format('YYYY-MM-DD HH:mm:ss');
});
//更新时间
const updatedAt = computed(() => {
  return dayjs(detailData.value.updatedAt).format('YYYY-MM-DD HH:mm:ss');
});
const state = ref(false)
const detailData = ref({
  name: '',
  stockInNo: '',
  stockInDate: '',
  purchaseOrderName: '',
  purchaseOrderNo: '',
  supplierName: '',
  supplierNo: '',
  inspectionName: '',
  inspectionNo: '',
  remark: '',
  state:true,
  materialName: '',
  materialNo: '',
  specification: '',
  unit: '',
  productionDate: '',
  expiryDate: '',
  batchNo: '',
  stockInQuantity: 0,
  warehouseName: '',
  zoneName: '',
  locationName: '',
  warehouseManager: '',
  creator: '',
  createdAt: '',
  updater: '',
  updatedAt: ''
})

//出入库
const handleStockIn = () => {
  //改变状态
  state.value =!state.value
}


// 获取详情数据
const fetchDetail = async () => {
  try {
    const response = await getStockInDetailApi(id)
    detailData.value = response
    state.value = response.state
  } catch (error) {
    console.error('获取详情失败:', error)
    ElMessage.error('获取详情失败')
  }
}

// 编辑操作
const handleEdit = () => {
  $router.push(`/storage/entrance/editBuy/${id}`)
}

// 删除操作
const handleDelete = async () => {
  try {
    await ElMessageBox.confirm('确认删除该入库单吗？', '提示', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning'
    })
    
    await putStockInDeleteApi(id)
    ElMessage.success('删除成功')
    $router.replace("/storage/entrance/buy")
  } catch (error) {
    if (error !== 'cancel') {
      console.error('删除失败:', error)
      ElMessage.error('删除失败')
    }
  }
}

// 关闭页面
const close = () => {
  $router.replace("/storage/entrance/buy")
}

onMounted(() => {
  setTimeout(() => {
    isFooterVisible.value = true;
  }, 100);
  fetchDetail()
})
</script>

<style scoped lang="scss">
.detailContainer {
  width: 100%;
  position: relative;
  height: 100%; /* 使用视口高度 */
  transform: translate(0);
  .title {
    .name {
      font-weight: bold;
      font-size: 18px;
    }
    .id {
      color: #969696;
      font-size: 13px;
      margin-left: 10px;
    }
  }
  .detailInfo {
    margin-top: 10px;
    display: flex;
  }
  .updateInfo {
    margin-left: 40px;
  }
  .basicBody {
    width: 100%;
    .basicInfoContainer,
    .warehouseContainer {
      padding: 20px;
      .milestone {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        height: 1.5px;
        background-color: #dfe2e7;
        .milestone-content {
          border: 1.5px solid #dfe2e7;
          padding: 10px;
          padding-left: 20px;
          padding-right: 20px;
          font-weight: bold;
          font-size: 15px;
          border-radius: 10px;
          z-index: 999;
          background-color: #fff;
          color: #1b9aee;
        }
      }
    }
    .warehouseContainer {
      margin-top: 20px;
    }
  }
  .footer {
    z-index: 999;
    width: 100%;
    height: 70px;
    background-color: #fff;
    position: fixed;
    bottom: 0;
    left: 0;
    padding: 10px;
    display: flex;
    justify-content: center;
    box-shadow: 0 -8px 10px rgba(92, 92, 92, 0.1);
    transform: translateY(100%); // 初始状态在视口下方
    transition: transform 0.5s ease-out; // 添加过渡效果

    &.footer-visible {
      transform: translateY(0); // 显示时回到原位
    }
  }
}
</style>